<template>
	<view>
		<nav-bar leftIcon="left"></nav-bar>
		<view style="padding: 75rpx 30rpx 0 30rpx; width: 100vw;">
			<text class="text">{{$t('賬戶安全')}}</text>
			<text class="text1">{{$t('爲確保您的賬戶安全，請設置登錄密碼和交易密碼')}}</text>
			<view class="ipt" @click="goto('/pages/changePassword/changePassword')">
				<view class="" style="display: flex;align-items: center;">
					<image style="width: 50rpx;height: 50rpx;" src="@/assets/safety/dl.png" mode=""></image>
					<text class="ipt-text">{{$t('登錄密碼')}}</text>
				</view>
				<uni-icons style="color: #fff;float: right;" type="right" size="20"></uni-icons>
			</view>
			<view class="ipt" @click="goto('/pages/transactionPassword/transactionPassword')"
				style="margin-top: 42rpx;">
				<view class="" style="display: flex;align-items: center;">
					<image style="width: 50rpx;height: 50rpx;" src="@/assets/safety/jy.png" mode=""></image>
					<text class="ipt-text">{{$t('交易密碼')}}</text>
				</view>
				<uni-icons style="color: #fff;float: right;" type="right" size="20"></uni-icons>
			</view>
			<view class="ipt">
				<view class="" style="display: flex;align-items: center;">
					<text class="ipt-text">{{$t('谷歌驗證碼')}}</text>
				</view>
				<switch :checked="checked" @change="handleSwitch"/>
			</view>
			<view class="codeMar" v-if="checked">
				<view class="backBox">
					<!-- <image src="../../assets/myCirculation/icon.png" class="codeImg"></image> -->
					<!-- <qrcode-vue :value="flowList.urlCFP" size="240" level="H" class="CodeQr" :margin="2" /> -->
					<!-- #ifdef H5 -->
					<qrcode-vue :value="code.qrCode" size="180" level="H" class="CodeQr" :margin="2" />
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<canvas class="code-item" canvas-id="qrcode" style="height: 500rpx;width: 500rpx;margin-left: -20rpx;" />
					<!-- #endif -->
				</view>
			</view>
<!-- 			<view class="texts" v-if="checked">
				{{ $t('谷歌驗證碼密鑰') }}
			</view>
			<view class="textLang" v-if="checked">
				{{ code }}
			</view> -->
			<view class="miKey" v-if="checked">
				<view class="nameKey">
					<view class="ipt-text" style="color: #fff;">{{ $t('谷歌驗證碼綁定賬號')}}: </view>
					<view class="ipt-text" style="color: #fff;">{{code.userId}}<image class="copy" src="../../assets/inviteFriends/copy.png" style="width: 40rpx;height: 40rpx;margin-top: 10rpx;" @click="copyName"></image></view>
				</view>
			</view>
			<view class="miKey" v-if="checked">
				<view class="nameKey">
					<view class="ipt-text" style="color: #fff;">{{ $t('谷歌驗證碼綁定密鑰')}}: </view>
					<view class="ipt-text" style="color: #fff;">{{code.secretKey}}<image class="copy" src="../../assets/inviteFriends/copy.png" style="width: 40rpx;height: 40rpx;margin-top: 10rpx;" @click="copyKey"></image></view>
				</view>
			</view>
<!-- 			<view class="btn" @click="copy" v-if="checked">
				{{ $t('複製谷歌驗證碼密鑰') }}
			</view>		 -->
			<view style="padding-bottom: 50rpx;"></view>	
		</view>

	</view>
</template>

<script setup>
	import {
		onBeforeUpdate,
		onMounted,
		ref
	} from "vue";
	
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const checked = ref(false)
	const {
		getMyInviteFriends,
		getMyInfo
	} = getInviteFriends()
	import getInviteFriends from '@/hooks/inviteFriends.js'
	import i18n from '@/locale/index'
	import wxcode from 'uniapp-qrcode'
	import QrcodeVue from 'qrcode.vue'	
	const code = ref('')
	const flowList = ref({
		code: '',
		urlCFP: ''
	})
	const getLIst = async () => {
		let ids = {
			userId: uni.getStorageSync('setUserInfo').userId
		}
		const data = await getMyInviteFriends('user/qrCodeUser', ids)
		flowList.value = data
	}
	//复制方法
	const copyName = () => {
		uni.setClipboardData({
			data: code.value.userId,
			success: function() {
				uni.showToast({
					title: `${i18n.global.t('複製成功')}`,
					duration: 1000
				})
			}
		})
	}
	//复制方法
	const copyKey = () => {
		uni.setClipboardData({
			data: code.value.secretKey,
			success: function() {
				uni.showToast({
					title: `${i18n.global.t('複製成功')}`,
					duration: 1000
				})
			}
		})
	}	
	function goto(url) {
		uni.navigateTo({
			url
		})
	}
	const handleSwitch = async(e)=>{
		checked.value = e.detail.value
		let list = {
			userId: uni.getStorageSync('setUserInfo').userId,
			isEnable: checked.value?1:0
		}
		let data = await getMyInviteFriends('userGoogleAuth/isEnableGoogle', list)
		// uni.setStorageSync({
		// 	key: 'googleVerificationSwitch',
		// 	data: e.detail.value
		// })
		userInfo()
	}
	const userInfo = async()=>{
		let list = {
			userId: uni.getStorageSync('setUserInfo').userId
		}
		let data = await getMyInfo('user/personalInfo', list)
		checked.value = data.googleVerificationSwitch
		if(checked.value){
			getQRBarcodeURL()
		}
	}
	const getQRBarcodeURL = async()=>{
		let list = {
			userId: uni.getStorageSync('setUserInfo').userId
		}
		let data = await getMyInfo('userGoogleAuth/getQRBarcodeURL', list)
		code.value = data
		// checked.value = data.googleVerificationSwitch
	}	
	function qrFun(text) {
		wxcode.qrcode('qrcode', text, 500, 500);
	}
	onBeforeUpdate(() => {
		// #ifdef APP-PLUS
		qrFun(code.value.secretKey)
		// #endif
	})
	onLoad(()=>{
		userInfo()
	})
</script>

<style lang="scss" scoped>
	.copy{
		margin-right: 50rpx;
		margin-left: 10rpx;
	}
	.ipt-texta{
		color: #FFF3E8;
		display: inline-flex;
		align-items: center;
		float: left;
	}
	.nameKey{
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
	}
	.miKey{
		margin-top: 35rpx;
	}
	.btn {
		width: 640rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #039BDA, #0DF2ED);
		border-radius: 50rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 35rpx;
		margin-bottom: 20rpx;
	}
	
	.texts {
		margin-top: 35rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 50rpx;
	}
	
	.textLang {
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	
	.codeMar {
		margin-top: 35rpx;
		.backBox {
			margin: 0 auto;
			width: 450rpx;
			height: 450rpx;
			background-color: #FFF3E8;
			border-radius: 25rpx;
			display: flex;
			align-items: center;
			justify-content: center;
	
			.codeImg {
				width: 230rpx;
				height: 230rpx;
			}
		}
	}
	.text {
		display: block;
		font-size: 42rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 9rpx;
	}

	.text1 {
		display: block;
		width: 690rpx;
		font-size: 24rpx;
		font-weight: 300;
		color: #848686;
		line-height: 38rpx;
		margin-top: 20rpx;
	}

	.ipt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		width: 690rpx;
		height: 100rpx;
		// /* background: #05141b; */
		// background-color: aqua;
		border-radius: 15rpx;
		margin-top: 50rpx;
		padding: 0 25rpx;

		.ipt-text {
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 23rpx;
			margin-left: 10rpx;
		}
	}
</style>